<template>
  <div class="orderlist">
    <div class="container">
      <p class="title">我的购物车</p>
      <div class="orderSingle" v-for="item in orderArray" :key="item.id">
        <div class="title">
          <p><span>创建时间</span>{{ getTime(item.order_time) }}</p>
          <p><span>订单编号</span>{{ item.order_id }}</p>
        </div>
        <ul class="goodList">
          <li v-for="good in item.goods_info" :key="good.id">
            <img :src="good.s_goods_photos[0].path" alt="" />
            <p class="name">
              {{ good.goods_name }}
            </p>
            <p class="num">x{{ good.num }}</p>
            <p class="price"><span>价格:￥</span>{{ good.price * good.num }}</p>
            <p class="subtotal">
              <span>小计:￥</span>{{ good.price * good.num }}
            </p>
          </li>
        </ul>
        <div class="orderfooter">
          <p class="total-price">
            总价：￥{{
              item.goods_info.reduce((prev, cur) => {
                return (prev += cur.num * cur.price);
              }, 0)
            }}
          </p>
          <button @click="delOrderSingle(item.id)">删除订单</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrder, delOrder } from "@/assets/request";
import OrderItem from "@/components/OrderItem.vue";
import dayjs from "dayjs";
export default {
  name: "OrderList",
  data() {
    return {
      orderArray: [],
      orderTime: "",
    };
  },
  methods: {
    async delOrderSingle(id) {
      const res = await delOrder(
        {
          project_id: 259,
        },
        id
      );
      this.getOrderArray();
    },
    async getOrderArray() {
      const res = await getOrder();
      this.orderArray = res.data.result.rows;
      this.orderArray.forEach(
        (item) => (item.goods_info = JSON.parse(item.goods_info))
      );
    },
    getTime(date) {
      return dayjs(date).format("DD/MM/YYYY");
    },
  },
  components: { OrderItem },
  async mounted() {
    this.getOrderArray();
  },
};
</script>

<style lang="scss" scoped>
.orderlist {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  .container {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    .title {
      display: flex;
      justify-content: start;
      align-items: center;
      width: 100%;
      height: 50px;
      font-size: 20px;
    }
    .orderSingle {
      width: 100%;
      margin-bottom: 20px;
      .title {
        display: flex;
        align-items: center;
        width: 100%;
        height: 50px;
        background-color: #2f333a;
        color: white;
        p {
          margin: 0 20px;
        }
      }
      .goodList {
        background-color: white;
        > li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 100px;
          padding: 10px 20px;
          img {
            width: 100px;
            height: 100px;
          }
          .name {
            width: 300px;
            height: 100px;
            line-height: 100px;
            font-size: 16px;
            font-weight: 700;
          }
          .num,
          .price,
          .subtotal {
            width: 100px;
          }
        }
      }
      .orderfooter {
        display: flex;
        justify-content: end;
        align-items: center;
        width: 100%;
        height: 40px;
        background-color: #2f333a;
        .total-price {
          margin-right: 30px;
          font-size: 16px;
          color: white;
        }
        button {
          width: 100px;
          height: 30px;
          margin-right: 50px;
          background-color: #f1f1f1;
        }
      }
    }
  }
}
</style>
